<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="viewport"
        content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,width=device-width, viewport-fit=cover">
    <title>六力学校</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/form.css">
</head>

<body>
    <div class="pub_header">
        <div class="nav">
            <div class="logo">
                <a href="./index.html">
                    <img src="./image/logo.png" alt="">
                </a>
            </div>
            <!--  -->
            <div class="nav_list nologin">
                <a href="javascript:;">
                    <div class="nav_item" onclick="onShow(true)">
                        <img src="./image/img1.png" alt="">
                        <p>登录</p>
                    </div>
                </a>
                <a href="javascript:;" onclick="onShow(false)">
                    <div class="nav_item">
                        <p>注册</p>
                    </div>
                </a>
            </div>
            <!--  -->
            <div class="nav_list logout">
                <a href="javascript:;">
                    <div class="nav_item">
                        <img src="./image/img1.png" alt="">
                        <p class="logout_phone"></p>
                    </div>
                </a>
                <a href="javascript:;" onclick="logout()">
                    <div class="nav_item">
                        <p>退出登陆</p>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="pub_contain">
        <div class="pub_form">
            <form>
                <div class="form_title">申请学部</div>
                <div class="form_1" attr-key="academic">
                    <div class="radio_item on">
                        <div class="form_radio"></div> IB小学
                    </div>
                    <div class="radio_item">
                        <div class="form_radio"></div> IB初中
                    </div>
                    <div class="radio_item">
                        <div class="form_radio"></div> 国内高中
                    </div>
                    <div class="radio_item">
                        <div class="form_radio"></div> 国际高中
                    </div>
                </div>
                <div class="form_title">学生信息</div>
                <div class="flex form_form_sub">
                    <div class="form_left">
                        <div class="form_label">
                            <div class="form_name must">学生姓名</div>
                            <div class="form_text">
                                <input type="text" name="title" id="title" placeholder="请输入学生姓名">
                            </div>
                        </div>
                        <div class="form_label">
                            <div class="form_name must">出生日期</div>
                            <div class="form_checked" attr-key="birth">
                                <div class="form_checked_item"><select id="date-sel-year" rel=""
                                        onchange="birthChange()"></select>年</div>
                                <div class="form_checked_item"><select id="date-sel-month" rel=""
                                        onchange="birthChange()"></select>月</div>
                                <div class="form_checked_item"><select id="date-sel-day" rel=""
                                        onchange="birthChange()"></select>日</div>
                            </div>
                        </div>
                        <div class="form_label">
                            <div class="form_name must">身高</div>
                            <div class="form_text">
                                <input type="text" name="height" id="height" placeholder="请输入你的身高">
                            </div>
                        </div>
                        <div class="form_label">
                            <div class="form_name must">户口本（提示：若家长使用五证，请在上传处提交五证，并将五证合并成两个长图进行上传）</div>
                            <div class="form_img">
                                <div class="form_img_item">
                                    <img class="up" src="./image/img7.png" alt="">
                                    <p>户主本首页</p>
                                    <input type="file" accept="image/*" name="hu_page" id="hu_page">
                                    <img class="photo" src="" alt="">
                                </div>
                                <div class="form_img_item">
                                    <img class="up" src="./image/img7.png" alt="">
                                    <p>学生本人户口页</p>
                                    <input type="file" accept="image/*" name="hu_oneself" id="hu_oneself">
                                    <img class="photo" src="" alt="">
                                </div>
                            </div>
                            <div class="form_tips">支持 jpg, png图片格式</div>
                        </div>
                        <div class="form_label">
                            <div class="form_name must">证件类型</div>
                            <div class="form_select">
                                <select name="certificates" id="certificates">
                                    <option value="0">身份证</option>
                                </select>
                                <img src="./image/img6.png" alt="">
                            </div>
                        </div>
                        <div class="form_label">
                            <div class="form_name must">身份证号</div>
                            <div class="form_text">
                                <input type="text" name="id_number" id="id_number" placeholder="请输入身份证号">
                            </div>
                        </div>
                        <div class="form_label">
                            <div class="form_name must">原就读学校所在地</div>
                            <div class="form_text">
                                <input type="text" name="original" id="original" placeholder="请输入原就读学校所在地">
                            </div>
                        </div>
                        <div class="form_label">
                            <div class="form_name must">申请入学时间</div>
                            <div class="form_text">
                                <input type="text" name="admission" id="admission" placeholder="申请入学时间">
                            </div>
                        </div>
                        <div class="form_label">
                            <div class="form_name must">学籍所在地是否为天津</div>
                            <div class="form_1 form_3" attr-key="is_xueji">
                                <div class="radio_item on">
                                    <div class="form_radio"></div> 是
                                </div>
                                <div class="radio_item">
                                    <div class="form_radio"></div> 否
                                </div>
                            </div>
                        </div>
                        <div class="form_label">
                            <div class="form_name">邮箱</div>
                            <div class="form_text">
                                <input type="text" name="email" id="email" placeholder="请输入邮箱">
                            </div>
                        </div>
                    </div>
                    <!--  -->
                    <div class="form_right">
                        <div class="form_label">
                            <div class="form_name must">性别</div>
                            <div class="form_1 form_3" attr-key="sex">
                                <div class="radio_item on">
                                    <div class="form_radio"></div> 男
                                </div>
                                <div class="radio_item">
                                    <div class="form_radio"></div> 女
                                </div>
                            </div>
                        </div>
                        <div class="form_label">
                            <div class="form_name must">民族</div>
                            <div class="form_text">
                                <input type="text" name="nation" id="nation" placeholder="请输入你的民族">
                            </div>
                        </div>
                        <div class="form_label">
                            <div class="form_name must">体重</div>
                            <div class="form_text">
                                <input type="text" name="weight" id="weight" placeholder="请输入你的体重">
                            </div>
                        </div>
                        <div class="form_label">
                            <div class="form_name must">免冠照片</div>
                            <div class="form_img">
                                <div class="form_img_item w-95">
                                    <img class="up" src="./image/img7.png" alt="">
                                    <p>学生照片</p>
                                    <input type="file" accept="image/*" name="bareheaded" id="bareheaded">
                                    <img class="photo" src="" alt="">
                                </div>
                            </div>
                            <div class="form_tips">支持 jpg, png图片格式</div>
                        </div>
                        <div class="form_label">
                            <div class="form_name must">户口所在地</div>
                            <div class="form_text">
                                <input type="text" name="location" id="location" placeholder="请输入户口所在地，具体到区域">
                            </div>
                        </div>
                        <div class="form_label">
                            <div class="form_name must">原就读学校名称</div>
                            <div class="form_text">
                                <input type="text" name="school_name" id="school_name" placeholder="请输入原就读学校名称">
                            </div>
                        </div>
                        <div class="form_label">
                            <div class="form_name must">报名年级</div>
                            <div class="form_select">
                                <select name="grade" id="grade">
                                    <option value="">请选择报名年级</option>
                                    <option value="0">一年级</option>
                                    <option value="1">二年级</option>
                                    <option value="2">三年级</option>
                                    <option value="3">四年级</option>
                                    <option value="4">五年级</option>
                                    <option value="5">六年级</option>
                                    <option value="6">七年级</option>
                                    <option value="7">八年级</option>
                                    <option value="8">九年级</option>
                                    <option value="9">十年级</option>
                                    <option value="10">十一年级</option>
                                    <option value="11">十二年级</option>
                                </select>
                                <img src="./image/img6.png" alt="">
                            </div>
                        </div>
                        <div class="form_label">
                            <div class="form_name">中考所在地是否为天津<span>（申请国内高中、国际⾼必填）</span></div>
                            <div class="form_1 form_3" attr-key="is_storage">
                                <div class="radio_item on">
                                    <div class="form_radio"></div> 是
                                </div>
                                <div class="radio_item">
                                    <div class="form_radio"></div> 否
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--  -->
                <div class="form_label">
                    <div class="form_name">个人兴趣爱好、成长经历或参加活动所获荣誉简述</div>
                    <div class="form_textarea">
                        <textarea name="sketch" id="sketch" placeholder="请输入个人兴趣爱好、成长经历或参加活动所获荣誉简述"></textarea>
                    </div>
                </div>
                <!--  -->
                <div class="form_title mt-50">家庭信息</div>
                <div class="flex form_form_sub">
                    <div class="form_left">
                        <div class="form_label">
                            <div class="form_name must">父亲姓名</div>
                            <div class="form_text">
                                <input type="text" name="father_name" id="father_name" placeholder="请输入父亲姓名">
                            </div>
                        </div>
                        <div class="form_label">
                            <div class="form_name must">父亲的工作单位</div>
                            <div class="form_text">
                                <input type="text" name="father_work" id="father_work" placeholder="请输入工作单位">
                            </div>
                        </div>
                        <div class="form_label">
                            <div class="form_name">父亲的职务</div>
                            <div class="form_text">
                                <input type="text" name="father_post" id="father_post" placeholder="请输入职务">
                            </div>
                        </div>
                        <div class="form_label">
                            <div class="form_name must">父亲的移动电话</div>
                            <div class="form_text">
                                <input type="text" name="father_phone" id="father_phone" placeholder="请输入电话">
                            </div>
                        </div>
                    </div>
                    <!--  -->
                    <div class="form_right">
                        <div class="form_label">
                            <div class="form_name must">母亲姓名</div>
                            <div class="form_text">
                                <input type="text" name="mother_name" id="mother_name" placeholder="请输入母亲姓名">
                            </div>
                        </div>
                        <div class="form_label">
                            <div class="form_name must">母亲的工作单位</div>
                            <div class="form_text">
                                <input type="text" name="mother_work" id="mother_work" placeholder="请输入工作单位">
                            </div>
                        </div>
                        <div class="form_label">
                            <div class="form_name">母亲的职务</div>
                            <div class="form_text">
                                <input type="text" name="mother_post" id="mother_post" placeholder="请输入职务">
                            </div>
                        </div>
                        <div class="form_label">
                            <div class="form_name must">母亲的移动电话</div>
                            <div class="form_text">
                                <input type="text" name="mother_phone" id="mother_phone" placeholder="请输入电话">
                            </div>
                        </div>
                    </div>
                </div>
                <!--  -->
                <div class="form_title mt-50">家庭常住地址</div>
                <div class="flex form_form_sub">
                    <div class="form_left">
                        <div class="form_label">
                            <div class="form_name must">所在地区</div>
                            <div class="form_text">
                                <input type="text" name="family_region" id="family_region" placeholder="请输入所在地区">
                            </div>
                        </div>
                    </div>
                    <!--  -->
                    <div class="form_right">
                        <div class="form_label">
                            <div class="form_name must">详细地址</div>
                            <div class="form_text">
                                <input type="text" name="family_address" id="family_address" placeholder="请输入详细地址">
                            </div>
                        </div>
                    </div>
                </div>
                <!--  -->
                <div class="form_title mt-50">其他信息</div>
                <div class="flex form_form_sub">
                    <div class="form_left">
                        <div class="form_label">
                            <div class="form_name">您联系的六力哪位老师</div>
                            <div class="form_text">
                                <input type="text" name="contact_teacher" id="contact_teacher" placeholder="请输入老师姓名">
                            </div>
                        </div>
                    </div>
                    <div class="form_right">
                        <div class="form_label">
                            <div class="form_name">您未来是否有出国留学意向</div>
                            <div class="form_1 form_3" attr-key="is_abroad">
                                <div class="radio_item on">
                                    <div class="form_radio"></div> 是
                                </div>
                                <div class="radio_item">
                                    <div class="form_radio"></div> 否
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--  -->
                <div class="form_label">
                    <div class="form_name must">您是通过哪种途径了解到六力</div>
                    <div class="form_1 form_3" attr-key="channel">
                        <div class="radio_item on">
                            <div class="form_radio"></div> 网络
                        </div>
                        <div class="radio_item">
                            <div class="form_radio"></div> 亲朋推荐
                        </div>
                        <div class="radio_item">
                            <div class="form_radio"></div> 官方公众号
                        </div>
                        <div class="radio_item">
                            <div class="form_radio"></div> 当地居民
                        </div>
                        <div class="radio_item">
                            <div class="form_radio"></div> 教育平台
                        </div>
                        <div class="radio_item">
                            <div class="form_radio"></div> 本校家长推荐
                        </div>
                        <div class="radio_item">
                            <div class="form_radio"></div> 网站搜索
                        </div>
                        <div class="radio_item">
                            <div class="form_radio"></div> 其它
                        </div>
                    </div>
                </div>
                <!--  -->
                <div class="btns">
                </div>
            </form>
        </div>
    </div>
    <div class="pub_footer">
        <p>Copyright © 2005-2013天津武清六力学校 津ICP备19012091号-1</p>
        <p>天津六力教育是一家专业的北京、天津私立国际学校（包含小学、初中、高中、天津A-Level课程等），如果您家孩子有这方面需求，欢迎咨询：天津私立学校的客服，期待您的来电</p>
    </div>
</body>
<script src="./js/jquery-2.0.3.min.js"></script>
<script src="./js/dateTime.js"></script>
<script src="./js/message.js"></script>
<script src="./js/public.js"></script>
<script>
    var params = {
        academic: 0,// 申请学部 0|IB小学  1|IB初中  2|国内高中  3|国际高中',
        sex: 0, // 性别
        is_xueji: 0, // 学籍所在地是否为天津
        is_storage: 0, // 中考所在地是否为天津
        channel: 0, // 您是通过哪种途径了解到六力
        is_abroad: 0, //您未来是否有出国留学意向

        certificates: 0, // 身份证
        grade: '', // 报名年级

        birth: '', // 出生年月日 - 时间戳/秒
        is_birth: '', // 出生年月日  - 2020-02-02

        hu_page: '', // 户主本首页
        hu_oneself: '', // 学生本人户口页
        bareheaded: '', // 学生照片
    }

    let isDisabled = false // 是否可以编辑

    // 获取信息
    function getData() {
        let pro_id = window.location.href.split('id=')[1]
        let users_id = localStorage.getItem('uid')
        let token = localStorage.getItem('token')

        $.ajax({
            url: ajaxUrl + '/Index/backShow',
            type: "POST",
            data: {
                pro_id: pro_id,
                is_storage: 1,
                users_id: users_id
            },
            dataType: "json",
            success: function (data) {
                if (data.status == 1) {
                    let info = data.data
                    // examine_status 1审核中 2未录取 3已录取
                    if (Number(info.examine_status) != 0) {
                        isDisabled = true
                        $("input").attr('disabled', true)
                        $("textarea").attr('disabled', true)
                        let type = info.examine_status == 1 ? '提交成功，等待通知' : info.examine_status == 2 ? '未录取' : info.examine_status == 3 ? '已录取' : ''
                        $(".btns").html(`<div class="popup_btn noedit">${type}</div>`)
                    } else {
                        $(".btns").html(`<div class="popup_btn edit">暂存/修改</div><div class="popup_btn sure">提 交</div>`)
                    }

                    for (let i in info) {
                        // input / textarea
                        if ($('#' + i).attr('placeholder')) {
                            $('#' + i).val(info[i])
                        }
                        // img
                        if ($('#' + i).attr('type') == 'file' && info[i]) {
                            $('#' + i).siblings('.photo').attr('src', info[i]).show()
                        }
                        // radio
                        for (let j in params) {
                            if (i == j) {
                                params[j] = info[i]
                            }
                            for (let c = 0; c < $('.form_1').length; c++) {
                                if ($('.form_1').eq(c).attr('attr-key') == j) {
                                    $(".form_1").eq(c).find('.radio_item').eq(params[j]).addClass('on').siblings().removeClass('on')
                                }
                            }
                        }

                        // select
                        if ($('#' + i).is('select')) {
                            $('#' + i).find('option').eq(Number(info[i]) + 1).attr('selected', true)
                            params[i] = info[i]
                        }

                        // 年月日
                        if (i == 'birth') {
                            let birth = formatInfo(info[i])

                            let year = $('#date-sel-year').find('option')
                            for (let f = 0; f < year.length; f++) {
                                if (year.eq(f).val() == Number(birth.y)) {
                                    year.eq(f).attr('selected', true)
                                    $('#date-sel-year').trigger('change')
                                }
                            }

                            let month = $('#date-sel-month').find('option')
                            for (let f = 0; f < month.length; f++) {
                                if (month.eq(f).val() == Number(birth.m)) {
                                    month.eq(f).attr('selected', true)
                                    $('#date-sel-month').trigger('change')
                                }
                            }

                            let day = $('#date-sel-day').find('option')
                            for (let f = 0; f < day.length; f++) {
                                if (day.eq(f).val() == Number(birth.d)) {
                                    day.eq(f).attr('selected', true)
                                }
                            }

                            // change事件触发会影响2020-02-02 少最后一位2020-02-0
                            params['birth'] = info[i]
                            params['is_birth'] = birth.ymd
                        }
                    }
                } else if (data.status == 0) {
                    $(".btns").html(`<div class="popup_btn edit">暂存/修改</div><div class="popup_btn sure">提 交</div>`)
                }
            }
        })
    }
    getData()

    // 时间戳 转 日期
    function add0(m) { return m < 10 ? '0' + m : m }
    function formatInfo(shijianchuo) {
        var time = new Date(parseInt(shijianchuo) * 1000);
        var y = time.getFullYear();
        var m = time.getMonth() + 1;
        var d = time.getDate();
        var h = time.getHours();
        var mm = time.getMinutes();
        var s = time.getSeconds();
        return {
            y: y,
            m: add0(m),
            d: add0(d),
            ymd: y + '-' + add0(m) + '-' + add0(d)
        }
    }

    // 单选 class=form_1为单选类模版 
    $('.form_1 .radio_item').on('click', function () {
        if (isDisabled) {
            return false
        }
        let key = $(this).parent('div').attr('attr-key')
        params[key] = $(this).index()
        console.log(params)
        $(this).addClass('on').siblings().removeClass('on')
    })

    // 出生日期
    $.date_picker({
        YearSelector: "#date-sel-year",
        MonthSelector: "#date-sel-month",
        DaySelector: "#date-sel-day"
    });

    function birthChange() {
        if (isDisabled) {
            return false
        }
        let year = $('#date-sel-year').val()
        let month = $('#date-sel-month').val() < 10 ? '0' + $('#date-sel-month').val() : $('#date-sel-month').val()
        let day = $('#date-sel-day').val() < 10 ? '0' + $('#date-sel-day').val() : $('#date-sel-day').val()

        params['is_birth'] = year + '-' + month + '-' + day
        if (params['is_birth'].length != 10) {
            return false
        }
        params['birth'] = new Date(params['is_birth']).getTime() / 1000
        console.log(params)
    }

    // 单图上传
    $("input[type=file]").on('change', function (event) {
        if (isDisabled) {
            return false
        }
        var that = $(this)
        var file = event.currentTarget.files[0];

        let key = $(this).attr('id') || $(this).attr('name')

        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function (e) {
            baseImg(e.target.result, key)
            that.siblings('.photo').attr('src', e.target.result).show()
        };
    })

    function baseImg(base64, key) {
        $.ajax({
            url: ajaxUrl + '/Index/save_base_img',
            type: "POST",
            data: {
                base64: base64
            },
            dataType: "json",
            success: function (data) {
                if (data.status == 1) {
                    params[key] = data.src
                    console.log(params)
                }
            }
        })
    }

    // 提交
    $(document).on('click', '.sure', function () {
        let info = decodeURIComponent($('form').serialize(), true)
        isForm(info, 2)
    })

    // 暂存
    $(document).on('click', '.edit', function () {
        let info = decodeURIComponent($('form').serialize(), true)
        isForm(info, 1)
    })

    function isForm(info, is_storage) {
        // 暂存不验证
        if (is_storage == 1) {
            let a = info.split('&')
            for (let i = 0; i < a.length; i++) {
                let b = a[i].split('=')
                params[b[0]] = b[1]
            }
            subForm(is_storage)
            return false
        }

        // 
        let a = info.split('&')
        for (let i = 0; i < a.length; i++) {
            let b = a[i].split('=')
            if (!b[1] && $(`#${b[0]}`).attr('placeholder')) {
                if ($(`#${b[0]}`).parents('.form_label').find('.must').length) {
                    // 文本、多文本 && placeholder && 必填
                    toast('请输入' + $(`#${b[0]}`).parents('.form_label').find('.must').text())
                    return false
                }
            }
            params[b[0]] = b[1]
        }

        for (let j in params) {
            if (String(params[j]) == ' ') {
                toast('请输入' + $(`#${j}`).siblings('p').text())
                return false
            }
        }

        if (!$('#grade').val()) {
            toast('请选择报名年级')
            return false
        }

        if (params['is_birth'].length != 10) {
            toast('请选择出生日期')
            return false
        }

        console.log(params)
        subForm(is_storage)
    }

    function subForm(is_storage) {
        let pro_id = window.location.href.split('id=')[1]
        let users_id = localStorage.getItem('uid')
        let token = localStorage.getItem('token')

        params.pro_id = pro_id
        params.users_id = users_id
        params.is_storage = is_storage
        params.token = token
        params.examine_status = is_storage == 2 ? 1 : ''
        console.log(params)

        $.ajax({
            url: ajaxUrl + '/Index/signReady',
            type: "POST",
            data: params,
            dataType: "json",
            success: function (data) {
                if (data.status == 1) {
                    console.log(data)
                    if (is_storage == 2) {
                        var tip = '提交成功'
                    } else {
                        var tip = '暂存成功'
                    }
                    alert(tip).then(() => {
                        history.go(0)
                    })
                } else {
                    toast(data.info)
                }
            }
        })
    }
</script>

</html>